<template>
	<view class="code-detail-container">
		<view style="background-color: white;margin: 60rpx 20rpx;border-radius: 30rpx;">
			<!-- 核销码展示区域 -->
			<view class="code-info">
				<text class="code-title">核销码 {{code}}</text>
			</view>
			<!-- 服务内容区域 -->
			<view class="service-content">
				<text class="section-title">服务内容</text>
				<view style="line-height: 50rpx;">{{serviceDesc}}</view>
			</view>
			<!-- 订单信息区域 -->
			<view class="order-info">
				<text class="section-title">订单信息</text>
				<view class="order-item">
					<text>订单价格：</text>
					<text>￥{{orderPrice}}</text>
				</view>
				<view class="order-item">
					<text>实付金额：</text>
					<text style="font-weight: 550;">￥{{actualPayment}}</text>
				</view>
				<view class="order-item">
					<text>优惠金额：</text>
					<text>￥{{discountAmount}}</text>
				</view>
				<view class="order-item">
					<text>订单编号：</text>
					<text>{{orderNumber}}</text>
				</view>
				<view class="order-item">
					<text>支付时间：</text>
					<text>{{paymentTime}}</text>
				</view>
				<view class="order-item">
					<text>预约时间：</text>
					<text>{{appointmentTime}}</text>
				</view>
			</view>
		</view>
		<!-- 确认核销按钮 -->
		<button class="confirm-button" v-show="isWriteOff" @click="showConfirmDialog">确认核销</button>
		<button class="confirm-button" style="background-color: darkgrey;" v-show="!isWriteOff"
			@click="toIndex">已核销</button>


		<view v-if="showDialog" class="confirm-dialog">
			<view class="dialog-content">
				<view class="dialog-title">核销此订单</view>
				<text class="dialog-message">请您仔细核对订单，此操作不可撤销，请谨慎操作</text>
				<view class="dialog-buttons">
					<text class="dialog-button" @click="confirmWriteOff">核销</text>
					<text class="dialog-button" @click="hideDialog">取消</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 核销码
	const code = 'MC—1234-5678-9012';
	// 服务内容描述
	const serviceDesc = 'XXX标准洗车服务包含\r\n整车泡沫冲洗擦干\r\n轮胎轮毂冲洗清洁\n车内吸尘\n内饰脚垫简单除尘\n(不包含虫尸、水泥、沥青和顽固污渍清理等)';
	// 订单价格
	const orderPrice = 30.00;
	// 实付金额
	const actualPayment = 25.00;
	// 优惠金额
	const discountAmount = 5.00;
	// 订单编号
	const orderNumber = '2020032554565799';
	// 支付时间
	const paymentTime = '2020.03.30 14:40:45';
	// 预约时间
	const appointmentTime = '2020.03.30 14:40';

	// 控制弹出框显示隐藏
	const showDialog = ref(false);
	// 确认核销和已核销
	const isWriteOff = ref(true);

	// 隐藏对话框
	const hideDialog = () => {
		showDialog.value = false;
	};


	// 显示确认对话框
	const showConfirmDialog = () => {
		showDialog.value = true;
	};
	// 确认核销方法，此处仅为模拟，可替换为实际接口调用
	const confirmWriteOff = () => {
		showDialog.value = false;
		console.log('点击确认核销，此处可添加调用后端接口逻辑');
		uni.showToast({
			title: '核销成功',
			icon: 'success',
			duration: 1000
		});
		isWriteOff.value = false;

	};


	const toIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		});
	};
</script>

<style scoped>
	.code-detail-container {
		padding: 30rpx;
		background-color: #F5F5F5;

	}

	.code-info {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.code-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.service-content,
	.order-info {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 550;
		margin-bottom: 15rpx;
		line-height: 60rpx;
	}

	.order-item {
		display: flex;
		margin-bottom: 10rpx;
		font-size: 30rpx;
	}

	.confirm-button {
		width: 80%;
		height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border: none;
		border-radius: 30rpx;
		font-size: 34rpx;
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10%;
	}

	.confirm-dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dialog-content {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 40rpx;
		text-align: center;
		width: 80%;
		max-width: 500rpx;
	}

	.dialog-title {
		font-size: 36rpx;
		margin-bottom: 20rpx;
		font-weight: 550;
	}

	.dialog-message {
		font-size: 30rpx;
		margin-bottom: 30rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.dialog-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 60rpx;
	}

	.dialog-button {
		font-size: 34rpx;
		color: #007AFF;
	}
</style>